<template>
  <div class="mutual-evaluation">
    <h2 class="title">互评界面</h2>

    <!-- 作业信息展示 -->
    <div class="homework-info">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>作业信息</span>
        </div>
        <p><strong>作业名称：</strong>{{ homeworkDetail.name }}</p>
        <p><strong>截止日期：</strong>{{ homeworkDetail.deadline }}</p>
        <p><strong>描述：</strong>{{ homeworkDetail.description }}</p>
      </el-card>
    </div>

    <!-- 互评列表 -->
    <div class="evaluation-list">
      <el-table :data="evaluationList" border stripe>
        <el-table-column label="学生作业ID" prop="studentHomeworkId" />
        <el-table-column label="学生姓名" prop="studentName" />
        <el-table-column label="提交时间" prop="submitTime" />
        <el-table-column label="作业文件">
          <template slot-scope="scope">
            <a :href="scope.row.fileUrl" target="_blank">下载作业</a>
          </template>
        </el-table-column>
        <el-table-column label="评分">
          <template slot-scope="scope">
            <el-rate v-model="scope.row.score" />
          </template>
        </el-table-column>
        <el-table-column label="评论">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.comment"
              placeholder="请输入评论"
              type="textarea"
              rows="2"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 提交互评结果 -->
    <div class="submit-evaluation">
      <el-button type="primary" @click="submitEvaluation">提交互评结果</el-button>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      homeworkId: this.$route.params.homeworkId, // 从路由参数获取作业ID
      userId: 1, // 替换为实际的用户ID
      homeworkDetail: {}, // 作业详情
      evaluationList: [], // 互评列表
    };
  },
  created() {
    // 加载作业详情和互评数据
    this.fetchHomeworkDetail();
    this.fetchEvaluationList();
  },
  methods: {
    // 获取作业详情
    async fetchHomeworkDetail() {
      try {
        const response = await axios.get("/homework/detail", {
          params: { homeworkId: this.homeworkId },
        });
        this.homeworkDetail = response.data;
      } catch (error) {
        console.error("获取作业详情失败:", error);
      }
    },
    // 获取互评列表
    async fetchEvaluationList() {
      try {
        const response = await axios.get("/evaluation/list", {
          params: { homeworkId: this.homeworkId },
        });
        this.evaluationList = response.data.map((item) => ({
          studentHomeworkId: item.studentHomeworkId,
          studentName: item.studentName,
          submitTime: item.submitTime,
          fileUrl: item.fileUrl,
          score: 0, // 默认评分
          comment: "", // 默认评论
        }));
      } catch (error) {
        console.error("获取互评列表失败:", error);
      }
    },
    // 提交互评结果
    async submitEvaluation() {
      try {
        const promises = this.evaluationList.map((item) => {
          return axios.post("/homework/studentscore", {
            studentHomeworkId: item.studentHomeworkId,
            score: item.score,
            userId: this.userId,
          });
        });

        await Promise.all(promises);

        this.$message.success("互评结果提交成功！");
      } catch (error) {
        console.error("提交互评结果失败:", error);
        this.$message.error("提交失败，请重试！");
      }
    },
  },
};
</script>

<style scoped>
.mutual-evaluation {
  width: 80%;
  margin: 0 auto;
}

.title {
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

.homework-info {
  margin-bottom: 20px;
}

.evaluation-list {
  margin-bottom: 20px;
}

.submit-evaluation {
  text-align: center;
}
</style>
